@import url('./normalize.css');
.btn {
    padding: 8px;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
    font-size: 15px;
}
.btn_sm{
    font-size: 12px;
    padding: 5px;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
}
.btn_lg{
    font-size: 18px;
    padding: 10px;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
}
/* ---------------------------------------------------------------- */
.default_btn {
    background-color: var(--btn-default);
    border: none;
    color: var(--default-font-color);
}
.default_btn:active{
    outline: 3px solid var(--default-border);
}
.success_btn{
    background-color: var(--btn-success);
    border: none;
    color: white;
}
.success_btn:active{
    outline: 3px solid var(--success-border);
}
.primary_btn {
    background-color: var(--btn-primary);
    border: none;
    color: white;
}
.primary_btn:active{
    outline: 3px solid var(--primary-border);
}
.warning_btn{
    background-color: var(--btn-warning);
    border: none;
    color: white;
}
.warning_btn:active{
    outline: 3px solid var(--warning-border);
}
.error_btn{
    background-color: var(--btn-error);
    border: none;
    color: white;
}
.error_btn:active{
    outline: 3px solid var(--error-border);
}
.info_btn{
    background-color: var(--btn-info);
    border: none;
    color: white;
}
.info_btn:active{
    outline: 3px solid var(--info-border);
}
.dark_btn{
    background-color: var(--btn-dark);
    border: none;
    color: white;
}
.dark_btn:active{
    outline: 3px solid var(--dark-border);
}
.secondary_btn{
    background-color: var(--btn-secondary);
    border: none;
    color: white;
}
.secondary_btn:active{
    outline: 3px solid var(--secondary-border);
}
/* ------------------------------------------ */
.default_btn_nobg {
    background: none;
    border: 1px solid var(--default-font-color);
    color: var(--default-font-color);
}
.success_btn_nobg{
    background: none;
    border: 1px solid var(--btn-success);
    color: var(--btn-success);
}
.primary_btn_nobg {
    background: none;
    border: 1px solid var(--btn-primary);
    color: var(--btn-primary); 
}
.warning_btn_nobg{
    background: none;
    border: 1px solid var(--btn-warning);
    color: var(--btn-warning);
}
.error_btn_nobg{
    background: none;
    border: 1px solid var(--btn-error);
    color: var(--btn-error);
}
.info_btn_nobg{
    background: none;
    border: 1px solid var(--btn-info);
    color: var(--btn-info);
}

.dark_btn_nobg{
    background: none;
    border: 1px solid var(--btn-dark);
    color: var(--btn-dark);
}
.secondary_btn_nobg{
    background: none;
    border: 1px solid var(--btn-secondary);
    color: var(--btn-secondary);
}